import React from 'react'
import {connect,} from 'react-redux'
import {withRouter} from 'react-router-dom'
// image
import PinkCrown from '../../../../res/images/web/userinfo/king@2x.png'
import GiftIcon from '../../../../res/images/web/userinfo/gift@2x.png'
import ConsumeIcon from '../../../../res/images/web/userinfo/buy@2x.png'
import ChargeIcon from '../../../../res/images/web/userinfo/wallet@2x.png'
import CrownIcon from '../../../../res/images/web/userinfo/vip@2x.png'
import CheckInIcon from '../../../../res/images/web/userinfo/sign@2x.png'

// components
import GoBackLayout from "../../../../layouts/GoBackLayout/GoBackLayout"
// anto-mobile
import {WhiteSpace, WingBlank,} from "antd-mobile"
// stylesheet
import './Level.css'
import LocalStorageService from "../../../../utils/LocalStorageService";
import LevelModel from "../../../../model/Level";

class Level extends React.Component {

    componentDidMount() {

        const userDetail = this.props.user.userdetail
        const initFlag = userDetail.initFlag
        if (initFlag === 0) {
            this.props.fetchUserDetail({uid: LocalStorageService.get('userid'),})
        }

    }



    render() {

        const userDetail = this.props.user.userdetail
        const currentExp = userDetail.Exp
        const currentLevel = userDetail.Viplevel
        const levelModel = new LevelModel(currentLevel)
        // const currentLevel = 3
        const currentLevelExp = levelModel.getNextLevelExp(currentLevel)
        const nextLevel = currentLevel + 1
        const neededExp = currentLevelExp - currentExp

        // props
        const {history} = this.props
        //templates
        const NavBarRightContent = (
            <span
                style={{color: '#333',}}
                onClick={() => history.push('level-list')}
            >等级说明表</span>
        )

        // levelCard
        const ExpStyle = {
            width: `${currentExp / currentLevelExp * 100}%`,
            height: '100%',
            borderRadius: '4px',
            backgroundColor: '#FFA500',
        }
        const LevelCardTemplate = (
            <WingBlank>
                <div className='my-level-upper-ctn'>
                    <img src={PinkCrown} alt='pink-crown' style={{height: 33, width: 48,}}/>
                    <p className='my-level-upper-lv'>Lv.{currentLevel}</p>
                    <p className='my-level-upper-needed-exp-text'>
                        还差{neededExp}点升级Lv.{nextLevel}
                    </p>
                    <div className='my-level-upper-exp-ctn'>
                        <div className='my-level-upper-exp' style={ExpStyle}/>
                        <p className='my-level-upper-exp-per-text'>
                            {currentExp}/{currentLevelExp}
                        </p>
                    </div>

                </div>
            </WingBlank>
        )
        // 快速升级
        const tips = [

            {
                icon: CheckInIcon,
                title: '每日签到',
                desc: '完成每日签到送送送',
                click: (e) => {
                    this.props.history.push('../../my')
                }
            },
            {
                icon: GiftIcon,
                title: '每日分享',
                desc: '每次可获得奖励',
                click: (e) => {
                    this.props.history.push('../../game')
                }
            },
            {
                icon: ConsumeIcon,
                title: '消费金币',
                desc: '非会员改昵称/购买预测',
                click: (e) => {
                    this.props.history.push('../../game')
                }
            },
            {
                icon: ChargeIcon,
                title: '充值金币',
                desc: '送等额奖励',
                click: (e) => {
                    this.props.history.push('../../wallet')
                }
            },
            {
                icon: CrownIcon,
                title: '购买会员',
                desc: '经验值爽翻天',
                click: (e) => {
                    this.props.history.push('../../vip-goods')
                }
            },
            {
                icon: null,
                title: '期待更多...',
                desc: null,
                click: (e) => {
                    return
                }
            },
        ]

        const levelTip = (tip) => {
            const img = tip.icon
                ? <img src={tip.icon} alt={tip.title} style={{width: 28, height: 28}}/>
                : null
            const desc = tip.desc
                ? <span>{tip.desc}</span>
                : null
            const title = <p className='my-level-tips-item-title'>{tip.title}</p>
            return (
                <div
                    className='my-level-tips-item' key={tip.title}
                    onClick={() => tip.click()}
                >
                    {img}
                    <div>
                        {title}
                        {desc}
                    </div>
                </div>
            )
        }
        const levelUpTips = (
            <div className='my-level-tips-ctn'>
                <p>如何快速升级</p>
                <div className='my-level-tips-items'>
                    {tips.map(tip => levelTip(tip))}
                </div>

            </div>
        )

        return (

            <GoBackLayout
                title='粉丝等级'
                history={history}
                rightContent={NavBarRightContent}
            >

                <WhiteSpace/>
                {LevelCardTemplate}
                {levelUpTips}
            </GoBackLayout>

        )
    }
}

// const Level = (props) => {
//     // mock data
//
// }

const mapState = state => ({
    user: state.user,
})

const mapDispatch = dispatch => ({
    fetchUserDetail: (payload) => dispatch.user.fetchUserDetail(payload),
})

export default connect(mapState, mapDispatch)(withRouter(Level))
